<template>
  <div>
    <draggable v-model="allnum" :move="getdata" @update="datadragEnd">
      <transition-group>
    <div class="main-table" v-for="(item, index) in allnum" :key="index">
      <span class="close" @click="del(index)" v-show="allnum.length>1"><i class="iconfont icon-untitled94"></i></span>
      <div class="inputcl">
        <span class="layer-list-title">名称:</span>
        <span><el-input v-model="item.name" placeholder="请输入名称" size="mini"></el-input></span>
      </div>
      <div class="clear"></div>
      <div class="inputcl">
        <span class="layer-list-title">类型:</span>
        <span>
        <el-radio v-model="item.type" label="input">输入框</el-radio>
        <el-radio v-model="item.type" label="radio">单选框</el-radio>
        <el-radio v-model="item.type" label="checkbox">多选框</el-radio>
        <el-radio v-model="item.type" label="text">文本</el-radio>
        <el-radio v-model="item.type" label="textarea">多行输入框</el-radio>
        <el-radio v-model="item.type" label="inputs">输入框组</el-radio>
      </span>
      </div>
      <div class="clear"></div>
      <div class="inputcl" v-show="item.type === 'radio' || item.type === 'checkbox'">
        <span class="layer-list-title">子项:</span>
        <span>
        <!--<el-input v-model="input" placeholder="请输入子项名称" size="mini"></el-input>-->
        <span class="input-2" v-for="(item1, index1) in item.children" :key="index1">
          <el-input v-model="item1.value" placeholder="请输入子项名称" size="mini" value="item1.value"></el-input><i class="iconfont icon-untitled94" style="margin-left: 10px;cursor: pointer" @click="delChild(index, index1)" v-show="item.children.length>1"></i>
        </span>
        <br/>
        <span class="input-2"><el-button size="mini" @click="addInp(index)">添加子项</el-button></span>
      </span>
      </div>
      <div class="clear"></div>
      <div class="inputcl">
        <span class="layer-list-title">是否必填:</span>
        <span>
        <el-radio v-model="item.empty" label="1">是</el-radio>
        <el-radio v-model="item.empty" label="0">否</el-radio>
      </span>
      </div>
      <div class="inputcl" style="margin-bottom: 30px;">
        <span class="layer-list-title">是否可用:</span>
        <span>
        <el-radio v-model="item.enabled" label="1">是</el-radio>
        <el-radio v-model="item.enabled" label="0">否</el-radio>
      </span>
      </div>
    </div>
      </transition-group>
    </draggable>
    <div class="main-btn"><el-button size="mini" @click="getVal">提 交</el-button></div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable},
  name: 'form-list',
  props: {
    content: Array
  },
  data () {
    return {
      messageall: 'qweqe',
      name: '',
      radio: '1',
      empty: '1',
      enabled: '1',
      allnum: [],
      alllist: {
        name: '',
        type: 'input',
        empty: '1',
        enabled: '1',
        children: [{
          value: ''
        }, {
          value: ''}]
      },
      items: [{
        value: ''
      }, {
        value: ''}
      ]
    }
  },
  watch: {
    content () {
      this.allnum = this.content
    }
  },
  mounted () {
    this.allnum = this.content
  },
  methods: {
    addInp (index) {
      this.allnum[index].children.push({
        value: ''
      })
    },
    delChild (index, val) {
      this.allnum[index].children.splice(val, 1)
    },
    del (index) {
      let that = this
      this.$confirm('确定删除表单项吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.allnum.splice(index, 1)
      }).catch(() => {
        console.log(123)
      })
    },
    getdata (evt) {
      console.log(evt.draggedContext)
    },
    datadragEnd (evt) {
      console.log('拖动前的索引 :' + evt.oldIndex)
      console.log('拖动后的索引 :' + evt.newIndex)
      console.log(this.allnum)
    },
    getVal () {
      this.$emit('getallVal', this.allnum)
    }
  }
}
</script>

<style lang="scss" scoped>
  .main-table{
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
    position: relative;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before {
    z-index: 0;
  }
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    z-index: 0;
  }
  .changeIndex {
    img {
      width: 100%;
    }
    span {
      cursor: pointer;
      display: inline-block;
      width: 20px;
      text-align: center;
    }
  }
  .close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 12px;
  }
  .main-btn{
    position: absolute;
    left: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
    .el-button--mini, .el-button--mini.is-round{
      padding: 7px 30px;
    }
    .el-button--mini, .el-button--small{
      font-size: 18px;
    }
  }
  .inputcl {
    margin-top: 20px;
    .layer-list-title {
      display: inline-block;
      width: 80px;
      margin-left: 15px;
      margin-right: 10px;
      float: left;
      vertical-align: middle;
      line-height: 28px;
    }
    .input-2:nth-of-type(1){
      margin-left: 0;
    }
    .input-2{
      margin-left: 105px;
      margin-top: 20px;
    }
    .img-list {
      vertical-align: top;
      float: left;
      line-height: 18px;
    }
    .imgupload {
      display: block;
      margin-left: 105px;
    }
    .el-input {
      max-width: 500px;
      margin-bottom: 20px;
    }
    img {
      width: 320px;
      height: 240px;
    }
  }
</style>
